<template>
  <YsForm class="logo-form" ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
    <YsFormItem prop="user_id">
      <YsInput v-model="form.user_id" class="login-icon" prefix="md-mail" placeholder="请输入邮箱/手机号">
      </YsInput>
    </YsFormItem>
    <YsFormItem prop="passwd">
      <YsInput type="password" prefix="md-unlock" class="login-icon" v-model="form.passwd" placeholder="请输入您的密码…">
      </YsInput>
    </YsFormItem>
    <YsFormItem class="logo-box">
      <YsButton class="logo-btn" @click="handleSubmit" type="primary" long>立即登录</YsButton>
    </YsFormItem>
    <p class="session-toggle">
      <span>忘记密码？</span>
      <span>注册新账号</span>
    </p>
  </YsForm>
</template>
<script>

export default {
  name: 'LoginForm',
  props: {
    userNameRules: {
      type: Array,
      default: () => {
        return [{ required: true, message: '账号不能为空', trigger: 'blur' }]
      }
    },
    passwordRules: {
      type: Array,
      default: () => {
        return [{ required: true, message: '密码不能为空', trigger: 'blur' }]
      }
    }
  },
  data() {
    return {
      form: {
        user_id: '',
        passwd: ''

      }
    }
  },
  computed: {
    rules() {
      return {
        user_id: this.userNameRules,
        passwd: this.passwordRules
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.$emit('on-success-valid', {
            user_id: this.form.user_id,
            passwd: this.form.passwd

          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.session-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  span {
    color: #405680;
    font-size: 18px;
  }
}
.logo-form {
  /deep/ .ivu-form-item {
    margin-bottom: 34px;
    .ivu-input {
      height: 56px;
      background: #f3f6f7;
      border: 2px solid transparent;
      padding-left: 46px;
      &:focus {
        border: 2px solid #0488fe;
        background: rgba(4, 136, 254, 0.1);
      }
    }
    .login-icon {
      .ivu-icon-md-mail {
        font-size: 24px;
        margin: 7px 0 0 10px;
        color: #808695c7;
      }
      .ivu-icon-md-unlock {
        font-size: 24px;
        margin: 7px 0 0 11px;
        color: #808695c7;
      }
    }
  }
  .logo-box {
    margin-bottom: 20px;
    .logo-btn {
      margin-top: 10px;
      height: 62px;
      font-size: 18px;
      background: linear-gradient(314deg, #0073d5 0%, #469be3 100%);
      opacity: 1;
    }
  }
}
</style>
